<!-- 
 * 成果匹配页面组件
 * @author: 
 * @since: 2022-05-11
 * index.vue
-->
<template>
  <div class="achievement-container">
    <div class="search">
      <Filters :formModel="state.formModel" :formLabel="state.formLabel" @reset="reset" @filter="filter"></Filters>
    </div>
    <div class="table">
      <TableCom :tableHeader="state.tableHeader" :tableData="state.tableData" @getCurrentChange="getCurrentChange" @colSelect="colSelect" @refresh="getAchievementList()" :pagination="state.pagination" :loading="loading" @getSelectChange="getSelectChange" @getSizeChange="getSizeChange" handleWidth="160" :isShowLogicHandleCol="true" :isShowGrooveHandleCol="false">
        <template #handle="scope">
          <div class="table-button">
            <div class="btn" @click="goDetail(scope.row)" v-if="scope.row.resultState === 'JOIN_OK'">详情</div>
            <div class="btn" @click="goSmartMatch(scope.row)" v-if="scope.row.resultState === 'SUCCESS' || scope.row.resultState === 'JOIN'">智能匹配</div>
            <div class="btn" @click="goFile(scope.row)" v-if="scope.row.resultState === 'JOIN'">归档</div>
            <div class="btn" @click="goHistory(scope.row)" v-if="scope.row.isHistory === true">对接记录</div>
          </div>
        </template>
        <functionBtn :btnList="btnList" @clickHandle="clickHandle"></functionBtn>
      </TableCom>
    </div>
  </div>
</template>

<script setup>
import { getAchievementListApi } from '@/api/interface/match.js'
import { getDomainApi, getDictItemListApi } from '@/api/public/publicDict.js'
import { ref, reactive, onMounted } from 'vue'
import { sessionstorage } from '@/utils/storage.js'
import { useRouter } from 'vue-router';
const router = useRouter();

const state = reactive({
  formModel: {//成果匹配搜索列表的参数
    keyword: '',//成果名称
    resultCodeOne: '',//成果所属领域
    resultTypeId: '',//成果类型
    resultState: '',//对接阶段
    resultSkillStageCode: '',//技术成熟度
    includePatent: '',//是否含专利
    resultCooperationCode: '',//合作方式
  },
  formLabel: [
    {
      label: '成果名称',
      model: "keyword",
      type: "text",
      width: '160',
      placeholder: '请输入成果名称',
    },
    {
      label: '成果所属领域',
      model: "resultCodeOne",
      type: "select",
      width: '160',
      placeholder: '请选择成果所属领域',
      option: [],
    },
    {
      label: '成果类型',
      model: "resultTypeId",
      type: "select",
      width: '160',
      placeholder: '请选择成果类型',
      option: [],
    },
    {
      label: '对接阶段',
      model: "resultState",
      type: "select",
      width: '160',
      placeholder: '请选择对接阶段',
      option: [
        {
          value: 'JOIN',
          key: '对接中'
        },
        {
          value: 'JOIN_OK',
          key: '对接完成'
        }
      ],
    },
    {
      label: '技术成熟度',
      model: "resultSkillStageCode",
      type: "select",
      width: '160',
      placeholder: '请选择技术成熟度',
      option: [],
    },
    {
      label: '是否含专利',
      model: "includePatent",
      type: "select",
      width: '160',
      placeholder: '请选择',
      option: [
        {
          value: true,
          key: '含专利'
        },
        {
          value: false,
          key: '不含专利'
        }

      ],
    },
    {
      label: '合作方式',
      model: "resultCooperationCode",
      type: "select",
      width: '160',
      placeholder: '请选择',
      option: [],
    },
  ],
  tableData: [],
  tableHeader: [
    {
      label: '成果名称',
      prop: "resultTitle",
    },
    {
      label: '成果所属领域',
      prop: "industryNameOne",
    },
    {
      label: '成果类型',
      prop: "resultTypeName",
    },
    {
      label: '合作方式',
      prop: "resultCooperationName",
    },
    {
      label: '技术成熟度',
      prop: "resultSkillStageName",
    },
    {
      label: '是否含专利',
      prop: "includePatentName",
    },
    {
      label: '成果联系人',
      prop: "resultContactPerson",
    },
    {
      label: '联系人电话',
      prop: "resultContactPhone",
    },
    {
      label: '对接阶段',
      prop: "resultStateName",
    },
  ],
  btnData: [
    {
      name: '详情',
      icon: 'chakan1',
      color: '#00A2FF',
      change: 'details'
    },
  ],
  pagination: {//分页
    currentPage: 1,
    size: 10,
    total: 0,
  },
  selectTableId: [],//选择表格数据

})
//区域加载
const loading = ref(true)
//需求匹配模块功能按钮
const btnList = reactive([
  // {
  //   name: '导出全量匹配结果',
  //   icon: 'daochu1',
  //   bgColor: '#00A2FF'
  // },
  // {
  //   name: '导出选中匹配结果',
  //   icon: 'daochu1',
  //   bgColor: '#00A2FF'
  // },


])

onMounted(() => {
  getDomain()
  getAchievementTypeList()
  getSkillMaturity()
  getAchievementList()
  getCooperationList()

})


//获取成果所属领域
const getDomain = () => {
  getDomainApi({ parentId: 0 }).then(res => {
    const { status, data } = res
    if (status === 200) {
      state.formLabel[1].option = data.map(item => ({
        ...item,
        value: item.id,
        key: item.keyName
      }))
    }
  })


}

//获取合作方式
const getCooperationList = () => {
  const params = {
    dictType: 'DICT_RESULT_COOPERATION'
  }
  getDictItemListApi(params).then(res => {
    const { status, data } = res
    if (status === 200) {
      state.formLabel[6].option = data.result.map(item => ({
        ...item,
        value: item.id,
        key: item.keyName
      }))

    }

  })
}

//获取成果类型
const getAchievementTypeList = () => {
  const params = {
    dictType: 'DICT_RESULT'
  }
  getDictItemListApi(params).then(res => {
    const { status, data } = res
    if (status === 200) {
      state.formLabel[2].option = data.result.map(item => ({
        ...item,
        value: item.id,
        key: item.keyName
      }))

    }

  })
}
//获取技术成熟度
const getSkillMaturity = () => {
  const params = {
    dictType: 'DICT_SKILL_STAGE'
  }
  getDictItemListApi(params).then(res => {
    const { status, data } = res
    if (status === 200) {
      state.formLabel[4].option = data.result.map(item => ({
        ...item,
        value: item.id,
        key: item.keyName
      }))

    }

  })

}

//获取成果匹配列表
const getAchievementList = () => {
  loading.value = true
  const params = {
    ipi: state.pagination.currentPage,
    ips: state.pagination.size,
    keyword: state.formModel.keyword,//成果名称
    resultCodeOne: state.formModel.resultCodeOne,
    resultTypeId: state.formModel.resultTypeId,
    resultSkillStageCode: state.formModel.resultSkillStageCode,
    includePatent: state.formModel.includePatent,
    resultState: state.formModel.resultState,
    resultCooperationCode: state.formModel.resultCooperationCode
  }
  getAchievementListApi(params).then(res => {
    const { status, data } = res
    if (status === 200) {
      loading.value = false
      state.tableData = data.result.map(item => ({
        ...item,
        status: item.resultState,
        includePatentName: item.includePatent ? '是' : '否'
      }))
      state.pagination.currentPage = data.pageNum
      state.pagination.size = data.pageSize
      state.pagination.total = data.total
    }

  })
}

//跳转智能匹配
const goSmartMatch = (data) => {
  sessionstorage.set('achievementItem', data)
  router.push({ name: 'AchievementSmartMatch' }).catch(() => { });

}
//跳转归档
const goFile = (data) => {
  sessionstorage.set('achievementItem', data)
  router.push({ name: 'AchievementFile' }).catch(() => { });
}

//跳转去详情
const goDetail = (data) => {
  sessionstorage.set('achievementItem', data)
  router.push({ name: 'AchievementDetail' }).catch(() => { });
}
//跳转去对接记录
const goHistory = (data) => {
  sessionstorage.set('achievementItem', data)
  router.push({ name: 'AchievementHistory', params: { id: data.id } }).catch(() => { });
}




//搜索
const filter = () => {
  getAchievementList()
}
//重置
const reset = () => {
  for (let key in state.formModel) {
    state.formModel[key] = ''
  }
  getAchievementList()
}

//点击当前页
const getCurrentChange = (val) => {
  state.pagination.currentPage = val;
  getAchievementList()
}

//点击条数
const getSizeChange = (val) => {
  state.pagination.size = val;
  getAchievementList()
}


//表格筛选列---取消全选
const colSelect = (data, type, e, currentItem) => {
  if (type === 'filter') {
    const currentData = colFilters(data, e, currentItem, state.tableHeader)
    state.tableHeader = currentData;
  } else {//全选/全取消
    state.tableHeader = data;
  }
}

//选择表格数据
const getSelectChange = (row) => {
  //   state.selectTableId = row.map(item => item.id)
}

</script>

<style lang="scss" scoped>
.table-button {
  display: flex;
  .btn {
    color: #00a2ff;
    margin-left: 5px;
    cursor: pointer;
  }
}
</style>
